<template>
	<view>
		<image src="/static/imgs/logobg.png" mode="scaleToFill" class="login-bg"></image>
		<view class="content-wrap">
			<!-- <image src="/static/common/logo.png" mode="" class="logo"></image> -->
			<view class="logo-text">
				网格宗智
			</view>
			<view class="logintab">
				<view class="yf-flex-center form-wrap">
					<tui-icon name="people-fill" color="#999" size="16"></tui-icon>
					<input type="text" v-model="mobile" placeholder="请输入账号" placeholder-style="color:#666"
						class="input-model" maxlength="11" />
					<tui-icon name="close-fill" color="#999" @click="mobile = ''" v-show="mobile" size="16"></tui-icon>
				</view>
				<view class="yf-flex-center form-wrap">
					<tui-icon name="pwd" color="#999" size="16"></tui-icon>
					<input type="text" placeholder-style="color:#666" v-model="password" placeholder="请输入密码"
						:password="passwordShow" class="input-model" maxlength="20" />
					<block v-if="password">
						<tui-icon :name="passwordShow ? 'unseen' : 'seen'" color="#999" @click="passwordShow = !passwordShow"
							size="16" class="password-eyes"></tui-icon>
						<tui-icon name="close-fill" color="#999" @click="password = ''" size="16"></tui-icon>
					</block>
				</view>
				<view :disabled="0 && !mobile || !password" @click="submitInput" class="yf-flex-center submitBt"
					:class="[mobile && password ? 'isActive' : '']">登录</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapState,
	mapMutations,
	mapActions
} from 'vuex';
import {
	triggerLoginRedirect
} from '@/common/util.js';
export default {
	data() {
		return {
			mobile: "", //账号
			password: "", //密码
			passwordShow: true, //是否显示密码
			redirect: null, //跳回路径
		};
	},
	computed: {
		...mapState(['latestMoile'])
	},
	onLoad(option) {
		const {
			redirect
		} = option;
		if (redirect) {
			this.redirect = redirect;
		}
		this.setForm();
	},
	methods: {
		...mapMutations(['SET_USERINFO', 'SET_TOKEN', 'SET_LOGINMOILE', "SET_USERPHONE"]),
		setForm() {
			this.mobile = this.latestMoile;
			if (process.env.APP_ENV == 'development') {
				this.password = '123456';
				this.mobile = '18279075253';
			}
		},
		redirectTo() {
			this.$Router.switchTab('tabBar-policeEnd');
			// const _redirect = this.redirect;
			// console.log(_redirect,8989);
			// if (_redirect === 'navigateBack') {
			// 	// const prePage = this.$api.prePage()
			// 	if (getCurrentPages().length > 1) {
			// 		this.$Router.navigateBack();
			// 	} else {
			// 		this.$Router.switchTab('tabBar-index');
			// 	}
			// } else if (_redirect === 'navigateBack2') {
			// 		console.log('14')
			// 	this.$Router.navigateBack(2);
			// } else if (_redirect && (_redirect.indexOf('/') > -1 || _redirect.indexOf('%2F') > -1)) {
			// 	debugger
			// 	let _url = _redirect;
			// 	// #ifdef MP-WEIXIN
			// 	_url = decodeURIComponent(_redirect);
			// 	// #endif
			// 	if (_url == '/pages/index/index') {
			// 		this.$Router.switchTab('tabBar-index');
			// 	} else {
			// 		this.$Router.redirectTo(_url);
			// 	}
			// } else {
			// 	this.$Router.switchTab('tabBar-policeEnd');
			// }
		},
		submitInput() {
			if (!this.mobile || !this.password) {
				return this.$api.msg('请输入完登录信息')
			}
			this.$api.showLoading()
			//验证通过！
			this.$apis.procuratorLogin({
				phone: this.mobile,
				pwd: this.password
			}).then((res) => {
				this.$api.hideLoading()
				if (res.code == 20000) {
					this.SET_LOGINMOILE(this.mobile);
					this.SET_TOKEN(res.data.token);
					this.SET_USERINFO(res.data.admin);
					this.SET_USERPHONE(false);//更新手机号校验状态
					const loginRedirect = this.$cache.getStorageSync('loginRedirect');
					if (loginRedirect) {
						//有内容
						triggerLoginRedirect();
					} else {
						this.redirectTo();
					}
				} else {
					this.$api.msg(res.msg)
				}
			}).catch((e) => {
				setTimeout(() => {
					this.$api.hideLoading()
				}, 1500)

			})
		}
	}
}
</script>

<style lang="scss">
.login-bg {
	width: 100%;
	height: 100vh;
}

.logintab {
	width: 100%;
	padding: 40rpx;
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 1px 2px 3px #333;
}

.content-wrap {
	position: absolute;
	left: 0;
	top: 20%;
	width: 100%;
	z-index: 2;
	padding: 0 40rpx 0;

	.logo {
		width: 156rpx;
		height: 156rpx;
		margin: 0 auto;
	}

	.logo-text {
		font-size: 54rpx;
		color: #000;
		text-align: center;
		margin: 35rpx auto 50rpx;
	}

	.form-wrap {
		margin: 0 0 36rpx;
		border-bottom: 2rpx solid #999;

		.input-model {
			margin: 0 20rpx;
			font-size: 12+26rpx;
			color: #333;
			height: 85rpx;
			flex: 1;
		}

		.password-eyes {
			margin: 0 30rpx 0 20rpx;
		}
	}

	.submitBt {
		margin-top: 82rpx;
		width: 100%;
		height: 80rpx;
		border-radius: 10rpx;
		color: #fff;
		background: #d9d9d9;
		font-size: 40rpx;
	}

	.isActive {
		color: #fff;
		background: #3291F8;
	}

	.psdHint {
		text-align: right;
		font-size: 12+24rpx;
		color: #fff;
		margin-top: 32rpx;
	}
}

.bottom-logo {
	width: 80rpx;
	height: 80rpx;
	position: absolute;
	bottom: 68rpx;
	left: 50%;
	margin-left: -40rpx;
}
</style>